import { type App, computed } from 'vue'
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VxeUITable from 'vxe-table' // https://vxetable.cn/#/start/install
import 'vxe-table/es/style.css'
import VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
import '@vxe-ui/plugin-render-element/dist/style.css'

// 程序集大小
const assemblySize = computed(() => {
  const geekerGlobal = localStorage.getItem('geeker-global')
  if (geekerGlobal === null) {
    return 'default'
  } else {
    return JSON.parse(geekerGlobal).assemblySize
  }
})

// 全局默认参数
VxeUITable.setConfig({
  size: 'small',
  // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
  zIndex: 9999,
  // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
  version: 0,
  table: {
    size: 'small',
    showHeader: true,
    showOverflow: true,
    showHeaderOverflow: true,
    autoResize: true,
    stripe: true,
    keepSource: true,
    border: true,
    // round: false,
    emptyText: '暂无数据',
    rowConfig: {
      isHover: true,
      isCurrent: true,
      // 行数据的唯一主键字段名
      keyField: '_VXE_ID',
    },
    editConfig: {
      trigger: 'click',
      mode: 'cell',
    },
    columnConfig: {
      resizable: false,
    },
    align: 'center',
    headerAlign: 'center',
  },
  pager: {
    // size: "medium",
    // 配套的样式
    perfect: false,
    pageSize: 10,
    pagerCount: 7,
    pageSizes: [10, 20, 50],
    layouts: ['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump'],
  },
  modal: {
    minWidth: 500,
    minHeight: 400,
    lockView: true,
    mask: true,
    // duration: 3000,
    // marginSize: 20,
    dblclickZoom: false,
    showTitleOverflow: true,
    transfer: true,
    draggable: false,
  },
})

export function setupVxe(app: App) {
  VxeUI.use(VxeUIPluginRenderElement)
  app.use(VxeUI).use(VxeUITable)

  return app
}

function tableSize() {
  /* if (assemblySize.value === 'large') {
    return 'large'
  } else if (assemblySize.value === 'small') {
    return 'mini'
  } else {
    return 'small'
  }
 */
  return 'small'
}
